<template>
  <div id="globalSider">
    <a-menu
      v-model:selectedKeys="currentItem"
      v-model:openKeys="currentOpen"
      mode="inline"
      theme="dark"
      @click="doMenuClick"
      :style="{ height: '100%', borderRight: 0 }"
    >
      <a-sub-menu key="/teacher" v-if="loginUserStore.loginUser.userRole === 'admin'">
        <template #title>
            <span>
              <laptop-outlined />
              教师管理
            </span>
        </template>
        <a-menu-item key="/teacher/info">教师信息</a-menu-item>
        <a-menu-item key="/teacher/courseSchedule">授课安排</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="/student" v-if="loginUserStore.loginUser.userRole === 'admin'">
        <template #title>
            <span>
              <AlertOutlined />
              学生管理
            </span>
        </template>
        <a-menu-item key="/student/info">学生信息</a-menu-item>
        <a-menu-item key="/student/group">班级管理</a-menu-item>
        <a-menu-item key="/student/score">成绩管理</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="/academic" v-if="loginUserStore.loginUser.userRole === 'admin'">
        <template #title>
            <span>
              <notification-outlined />
              教务管理
            </span>
        </template>
        <a-menu-item key="/academic/course">课程管理</a-menu-item>
        <a-menu-item key="/academic/exam">考试管理</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="/visualization" v-if="loginUserStore.loginUser.userRole === 'admin'">
        <template #title>
            <span>
              <BulbOutlined />
              数据可视化
            </span>
        </template>
        <a-menu-item key="/visualization/teacher/numByGender">教师性别分布</a-menu-item>
        <a-menu-item key="/visualization/teacher/numByAge">教师年龄分布</a-menu-item>
        <a-menu-item key="/visualization/studentScore/numByLevel">学生成绩分布</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="/system" v-if="loginUserStore.loginUser.userRole === 'admin'">
        <template #title>
            <span>
              <CrownOutlined />
              系统管理
            </span>
        </template>
        <a-menu-item key="/system/notice">通知公告</a-menu-item>
        <a-menu-item key="/system/resource">资源管理</a-menu-item>
        <a-menu-item key="/system/userManage">用户管理</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="/stuUser/myScore" v-if="loginUserStore.loginUser.userRole === 'student'">
        <template #title>
            <span>
              <AlertOutlined />
              我的成绩
            </span>
        </template>
        <a-menu-item key="/stuUser/myScore/profile">分数详情</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="/stuUser/notice" v-if="loginUserStore.loginUser.userRole === 'student'">
        <template #title>
            <span>
              <CrownOutlined />
              通知公告
            </span>
        </template>
        <a-menu-item key="/stuUser/notice/list">通知列表</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="/teaUser/myStudent" v-if="loginUserStore.loginUser.userRole === 'teacher'">
        <template #title>
            <span>
              <CrownOutlined />
              我的学生
            </span>
        </template>
        <a-menu-item key="/teaUser/myStudent/profile">学生详情</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="/teaUser/myGroup" v-if="loginUserStore.loginUser.userRole === 'teacher'">
        <template #title>
            <span>
              <CrownOutlined />
              我的班级
            </span>
        </template>
        <a-menu-item key="/teaUser/myGroup/teaching">任教班级</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="/teaUser/notice" v-if="loginUserStore.loginUser.userRole === 'teacher'">
        <template #title>
            <span>
              <CrownOutlined />
              通知公告
            </span>
        </template>
        <a-menu-item key="/teaUser/notice/list">通知列表</a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { AlertOutlined, LaptopOutlined, NotificationOutlined, CrownOutlined, BulbOutlined } from '@ant-design/icons-vue';
import router from '@/router'
import { useRoute } from 'vue-router'
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'

const loginUserStore = useLoginUserStore()

const currentOpen = ref<string[]>([]);
const currentItem = ref<string[]>([]);

const route = useRoute()
watch(() => route.fullPath, (newPath) => {
  if (newPath.startsWith('/teacher')) {
    currentOpen.value = ['/teacher']
    currentItem.value = [newPath]
  } else if (newPath.startsWith('/student')) {
    currentOpen.value = ['/student']
    currentItem.value = [newPath]
  } else if (newPath.startsWith('/academic')) {
    currentOpen.value = ['/academic']
    currentItem.value = [newPath]
  } else if (newPath.startsWith('/system')) {
    currentOpen.value = ['/system']
    currentItem.value = [newPath]
  } else if (newPath.startsWith('/stuUser/myScore')) {
    currentOpen.value = ['/stuUser/myScore']
    currentItem.value = [newPath]
  } else if (newPath.startsWith('/teaUser/myStudent')) {
    currentOpen.value = ['/teaUser/myStudent']
    currentItem.value = [newPath]
  } else if (newPath.startsWith('/teaUser/myGroup')) {
    currentOpen.value = ['/teaUser/myGroup']
    currentItem.value = [newPath]
  } else if (newPath.startsWith('/visualization')) {
    currentOpen.value = ['/visualization']
    currentItem.value = [newPath]
  } else if (newPath.startsWith('/teaUser/notice')) {
    currentOpen.value = ['/teaUser/notice']
    currentItem.value = [newPath]
  } else if (newPath.startsWith('/stuUser/notice')) {
    currentOpen.value = ['/stuUser/notice']
    currentItem.value = [newPath]
  }
  else {
    currentOpen.value = []
    currentItem.value = []
  }
})

// 路由跳转事件
const doMenuClick = ({ key }) => {
  router.push({
    path: key,
  })
}

</script>

<style scoped>

#components-layout-demo-top-side-2 .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

</style>
